<template>
  <div class="out">
    <div class="container">
      <h2>消息中心</h2>
      <div v-if=" messages.length === 0 ">
        <el-empty description="消息列表为空"></el-empty>
      </div>
      <div v-else class="msg-block" v-for="msg in messages" :key="msg.id" >
        <div class="msg-noread">
          <div class="repoint" title="未读消息" v-if="!msg.read"></div>
        </div>
        <div class="msg-content">
          <div class="msg-title" @click="openDetail(msg.id)">
            {{msg.title}}
          </div>
          <div class="msg-time">
             发送时间：{{new Date(msg.time * 1000).toLocaleString()}}
          </div>
        </div>
        <div class="msg-delete">
          <el-popconfirm
              title="确定要删除该条消息吗?"
              confirm-button-text="好的"
              cancel-button-text="算了"
              @confirm="deleteMsg(msg.id)"
          >
            <template #reference>
                <el-icon :size="24" @click=""><delete /></el-icon>
            </template>
          </el-popconfirm>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {Message} from "../../utils/http/messages";
import {Delete} from '@element-plus/icons'

export default {
  name: "MessageCenter",
  components:{
    Delete
  },
  emits:['openModal'],
  data :function (){
    return{
      messages : []
    }
  },
  methods:{
    readMsg(id){
      Message.read(id)
    },
    openDetail(id){
      this.readMsg(id)
      this.$emit("openModal",id)
      this.refreshMsg()
    },
    async deleteMsg(id){
      let resp = await Message.del(id);
      if (resp.success){
        this.$success("删除成功")
      }
      await this.refreshMsg();
    },
    async refreshMsg(){
      let resp = await Message.getAll()
      if(!resp.success) {
        if (resp.message.indexOf("auth")===-1)
          this.$error("获取信箱失败:"+resp.message)
      }else {
        this.messages = resp.data.messages;
      }
    }
  },
  mounted() {
    this.refreshMsg()
  }

}
</script>

<style scoped>
.container{
  width: 500px;
  height: 600px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .52);
  background: white;
  padding: 10px;
  font-size: 16px;
}
.msg-block {
  padding: 20px;
  box-sizing: border-box;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .11);
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}
.msg-noread{
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.repoint{
  width: 10px;
  height: 10px;
  background: red;
  border-radius: 5px;
}
.msg-content{
  width: 400px;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.msg-delete{
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
}
.msg-title {
  font-size: 18px;
  cursor: pointer;
}
.msg-time {
  margin-top: 5px;
  font-size: 14px;
  color: #409eff;
}
</style>
